<!DOCTYPE html>
<html xmlns:th="http://www.springframework.org/schema/jdbc">
<head>
    <meta charset="utf-8">
    <title>添加访客</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="Access-Control-Allow-Origin" content="*">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/lib/layui-v2.5.5/css/layui.css" media="all">
    <link rel="stylesheet" href="/lib/jq-module/zyupload/zyupload-1.0.0.min.css" media="all">
    <link rel="stylesheet" href="/css/public.css" media="all">

    <style>
        body {
            background-color: #ffffff;
        }

        .layuimini-container {
            margin-left: 10px !important;
            margin-top: 20px !important;
        }

        .layui-form-select .layui-edge {
            right: 25px !important;
        }

        .layui-form-pane .layui-form-label {
            width: 100px !important;
        }

        #inline-btn .layui-input-inline {
            width: 120px;
        }

        .layui-form-item {
            margin-bottom: 10px !important;
        }

        .layui-transfer-box {
            overflow: auto !important;
        }

        .input-no-border {
            border: none;
        }

        .label-no-pane {
            border-style: none !important;
            background-color: #FFFFFF !important;
        }
    </style>
</head>
<body>
<div class="layui-form layuimini-form layui-form-pane">
    <div class="layui-row" style="margin: 0 15px">
        <div class="layuimini-main">
            <div class="layui-col-xs4">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>来访信息</legend>
                </fieldset>
                <div class="layui-form-item">
                    <label class="layui-form-label required">姓名</label>
                    <div class="layui-input-inline">
                        <input type="text" id="Name" name="Name" lay-verify="required" lay-reqtext="姓名不能为空"
                               placeholder="请输入姓名" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">身份证号</label>
                    <div class="layui-input-inline">
                        <input type="text" id="IdCard" name="IdCard" lay-verify="required" lay-reqtext="身份证不能为空"
                               placeholder="请输入身份证号" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label required">联系电话</label>
                    <div class="layui-input-inline">
                        <input type="text" id="Telnum" name="Telnum" lay-verify="required" lay-reqtext="电话不能为空"
                               placeholder="请输入电话号码" value="" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">性别</label>
                    <div class="layui-input-inline">
                        <select id="Gender" name="Gender" lay-verify="required">
                            <option value="0">男</option>
                            <option value="1">女</option>
                        </select>
                    </div>
                </div>
                <!--民族-->
                <div class="layui-form-item" id="NationView"></div>
                <!---->
                <!--籍贯-->
                <div class="layui-form-item" id="NativeView"></div>

                <script id="template" type="text/html">
                    <label class="layui-form-label">{{ d.label }}</label>
                    <div class="layui-input-inline" style="height: 38px;">
                        <select id="{{d.name}}" name="{{d.name}}" lay-verify="required">
                            {{# layui.each(d.list, function(index, item){ }}
                            <option value="{{item.id}}">{{ item.name }}</option>
                            {{# }); }}
                        </select>
                    </div>
                </script>
            </div>
            <div class="layui-col-xs5">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>通行区域</legend>
                </fieldset>
                <div id="test7" class="demo-transfer" style="width: 90%;margin: 0 auto; text-align: center"></div>
            </div>
            <div class="layui-col-xs3">
                <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                    <legend>人员照片</legend>
                </fieldset>
                <div class="layui-card-body" style="width: 90%;margin: 0 auto; text-align: center">
                    <img id="preview-Img" src="" width="175px" height="235px">
                </div>
                <!--input存照片的base64-->
                <input id="picinfo" name="picinfo" type="hidden" lay-verify="credentialOne"
                       autocomplete="off" class="layui-input">
                <!--图片名-->
                <div class="layui-form-item" style="text-align: center">
                    <div class="layui-inline">
                        <label class="layui-form-label required"
                               style="width: 70px!important;">路径</label>
                        <div class="layui-input-inline">
                            <input id="fileName" name="fileName" disabled lay-verify="fileName"
                                   autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div style="width: 100%;margin: 0 auto;text-align: center">
                    <button id="upload_img" type="button" hidden="hidden"></button>
                    <button class="layui-btn" id="preview_img" type="button">选择图片</button>
                </div>
            </div>
        </div>
    </div>
    <div class="layui-row" style="margin: 0 15px">
        <div class="layuimini-main">
            <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
                <legend>其他信息</legend>
            </fieldset>
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">起始时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input getTime" id="ValidBegin" name="ValidBegin"
                               placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">结束时间</label>
                    <div class="layui-input-inline">
                        <input type="text" class="layui-input getTime" id="ValidEnd" name="ValidEnd"
                               placeholder="yyyy-MM-dd HH:mm:ss">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">联系地址</label>
                <div class="layui-input-block">
                    <input type="text" id="Address" name="Address" autocomplete="off" placeholder="请输入联系地址"
                           class="layui-input"
                           style="margin-left: -10px;width: 99%">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">备注信息</label>
                <div class="layui-input-block">
                    <input type="text" id="Notes" name="Notes" autocomplete="off" placeholder="请输入备注信息"
                           class="layui-input" style="margin-left: -10px;width: 99%">
                    <input type="hidden" name="Tempvalid" value="1">
                    <input type="hidden" name="IdType" value="2">
                    <input type="hidden" name="PersonType" value="0">
                    <input type="hidden" name="RoomNum" value="0">
                </div>
            </div>
        </div>
        <div class="layui-form-item" id="inline-btn">
            <div class="layui-input-inline" style="padding-top: 20px;!important;margin-left:30px">
                <button class="layui-btn" lay-submit lay-filter="saveBtn">保存</button>
            </div>
            <div class="layui-input-inline" style="padding-top: 20px;!important;margin: auto">
                <button class="layui-btn layui-btn-primary" onclick="back()">取消</button>
            </div>
            <div class="layui-input-inline" style="padding-top: 20px;!important;float: right">
                <button class="layui-btn" lay-submit lay-filter="saveBtnUp">保存并同步</button>
            </div>
        </div>
    </div>
</div>
<script src="/lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/js/jquery-3.2.1.min.js" charset="utf-8"></script>
<script src="/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script src="/lib/jq-module/zyupload/zyupload-1.0.0.min.js" charset="utf-8"></script>
<script th:inline="javascript">
    layui.use(['form', 'layer', 'upload', 'tableSelect', 'laydate', 'transfer', 'laytpl', 'element', 'util'], function () {
        let $ = layui.$,
            form = layui.form,
            layer = layui.layer,
            laydate = layui.laydate,
            laytpl = layui.laytpl,
            transfer = layui.transfer,
            upload = layui.upload,
            util = layui.util;

        let devices = [[${devices}]];
        /*上传图片*/
        upload.render({
            elem: '#preview_img'
            , url: '/upload'
            , size: 2048
            , auto: false //不自动上传
            , bindAction: '#upload_img' //上传绑定到隐藏按钮
            , choose: function (obj) {
                let Name = $("#Name").val()
                if (Name == ""){
                    return layer.msg('请先填写姓名');
                }
                this.data = { Name: Name};
                //预读本地文件
                obj.preview(function (index, file, result) {
                    $("#preview-Img").prop("src", result);
                    $('#picinfo').val(result); //隐藏的base64图片输入框赋值
                    $('#fileName').val(file.name);  //展示文件名
                })
            }
            , done: function (res) {
                $('#credential_hide').val(res.msg); //隐藏输入框赋值
                $('#submitForm').click(); //上传成功后单击隐藏的提交按钮
            }
            , error: function (index) {
                layer.msg('上传失败！' + index, {icon: 5});
            }
        });

        //日期时间选择器
        laydate.render({
            elem: '#ValidBegin'
            , type: 'datetime'
        });
        //日期时间选择器
        laydate.render({
            elem: '#ValidEnd'
            , type: 'datetime'
        });

        //穿梭框模拟数据
        // let data1 = [
        //     {"value": "1", "title": "李白"},
        //     {"value": "2", "title": "杜甫"},
        //     {"value": "3", "title": "苏轼"},
        //     {"value": "4", "title": "李清照"},
        //     {"value": "5", "title": "鲁迅"},
        //     {"value": "6", "title": "巴金"},
        //     {"value": "7", "title": "冰心"},
        //     {"value": "8", "title": "矛盾"},
        //     {"value": "9", "title": "贤心"},
        //     {"value": "10", "title": "贤心"},
        //     {"value": "11", "title": "贤心"}
        // ];
        //实例调用
        transfer.render({
            elem: '#test7',
            parseData: function(res){
                return {
                    "value": res.id, //数据值
                    "title": res.name //数据标题
                }
            },
            data: devices,
            width: 160,
            title: ['可选门禁', '已选门禁'],
            height: 350,
            id: 'key123' //定义唯一索引
        });
        // //批量办法定事件
        // util.event('lay-demoTransferActive', {
        //     getData: function () {
        //         let room = transfer.getData('key123'); //获取右侧数据
        //         layer.alert(JSON.stringify(room));
        //     }
        //     , reload: function () {
        //         //实例重载
        //         transfer.reload('key123', {
        //             title: ['可选区域', '已选区域']
        //             , value: []
        //         })
        //     }
        // });

        /**
         * 封装一个select选择器: selectTemplate(api,name,label,templateId,viewId){};
         * 参数 :
         * 请求地址: api,
         * select的name属性: name,
         * label名字: label
         * 模板id: templateId
         * 视图容器id: viewId
         */
        function selectTemplate(api, name, label, templateId, viewId) {
            $.get(api, function (res) {
                console.log(res);
                let list = {"name": name,"label": label,"list": [{"value": '', "name": "请选择"}]};
                if (res.data != null) {
                    list = {"name": name,"label": label,"list": res.data};
                }
                let getTpl = document.getElementById('' + templateId + '').innerHTML;
                let view = document.getElementById('' + viewId + '');
                laytpl(getTpl).render(list, function (html) {
                    view.innerHTML = html;
                });
                form.render('select');
            });
        }

        form.on('submit(saveBtn)', function (data) {
            data.field.RoomNum = JSON.stringify(transfer.getData('key123'));
            console.log(data.field);
            $.ajax({
                url:`/addPerson`,
                type:`post`,
                dataType:`json`,
                data: data.field,
                success:function (res) {
                    console.log(res);
                    if (res.code == 200){
                        layer.msg('添加成功');
                        layer.close(layer.index);
                        window.parent.location.reload();
                    }else{
                        layer.msg('添加失败');
                    }
                }
            });
            return false;
        });
        //监听提交
        form.on('submit(saveBtnUp)', function (data) {
            data.field.RoomNum = JSON.stringify(transfer.getData('key123'));
            console.log(data.field);
            $.ajax({
                url:`/addPersonUp`,
                type:`post`,
                dataType:`json`,
                data: data.field,
                timeout:10000,
                success:function (res) {
                    console.log(res);
                    if (res.code == 200){
                        layer.msg('添加成功');
                        layer.close(layer.index);
                        window.parent.location.reload();
                    }else{
                        layer.msg('添加失败');
                    }
                }
            });
            return false;
        });

        $(document).ready(function () {
            let person = [[${person}]];
            //加载民族选择框
            selectTemplate('/api/Nation.json', "Nation", "民族", "template", "NationView");
            //加载省份选择框
            selectTemplate('/api/Native.json', "Native", "籍贯", "template", "NativeView");

            if (person !=null){
                $("#Name").val(person.Name);
                $('#Gender').val(person.Gender);
                $('#IdCard').val(person.IdCard);
                $('#CardMode').val(person.CardMode);
                $('#Tempvalid').val(person.Tempvalid);
                $('#Address').val(person.Address);
                $('#Notes').val(person.Notes);
                $('#CardType').val(person.CardType);
                $('#Nation').val(person.Nation);
                $('#Native').val(person.Native);
                $('#preview-Img').val(person.picinfo);
            }
        });
    });
</script>
</body>
</html>